<template>
   <div class="set">
       <header class="head">
           <div>
              <div class="goback" @click="clickHandler()">
                  
                  </div> 
                  <span class="topbar-title">账户管理</span>
                  <div class="zfont">

                  </div>
                  <span class="menu"></span>
           </div>
       </header>
       <div class="personal-manage">
           <ul class="list clearfix">
               <li>
                   <div class="personal-li clearfix">
                       <div class="touxiang">头像</div>
                       <span class="photo">
                           <img src="../assets/img/headshot.jpg">
                       </span>
                   </div>
               </li>
               <li>
                   <div class="personal-li clearfix">
                       <div class="nickname">
                           昵称
                       </div>
                       <span class="num">123456789</span>
                   </div>
               </li>
               <li>
                   <div class="personal-li clearfix">
                       <div class="nickname">
                           用户名
                       </div>
                       <span class="num">1245666</span>
                   </div>
               </li>
               <li>
                   <div class="personal-li clearfix">
                       <div class="nickname">
                           性别
                       </div>
                       <span class="num"></span>
                   </div>
               </li>
               <li>
                   <div class="personal-li clearfix">
                   <div class="birth">生日</div>
                   </div>
               </li>
               <li>
                   
                   <div class="personal-li clearfix">
                   <div class="birth">首次养宠物</div>
                   </div>
               </li>
              
           </ul>
           <ul class="list clearfix">
               <li>
                   
                   
                   <div class="personal-li clearfix">
                   <div class="birth">地址管理</div>
                   </div>
               
               </li>
               <li>
                   
                   <div class="personal-li clearfix">
                   <div class="birth">账户安全</div>
                   </div>
               </li>
           </ul>
           <div class="signout" style="border-radius:30px">
               退出登录
           </div>
       </div>
       </div> 
</template>
<script>
export default{
    methods:{
        clickHandler(){
            this.$router.back(-1);
        }
    }
}
</script>
<style lang="stylus" scoped>
.set
    background-color #f5f5f5
header 
    display block
.head
    color #333
    height 0.5rem
    line-height 0.5rem
    position relative
    padding 0 1em
    border-bottom 0.01rem solid #f3f3f3
    background #fff
    text-align center
.goback
    background url('../assets/img/lefticon.png') no-repeat
    background-size 0.09rem 0.17rem
    display block
    width 0.22rem
    height 0.2rem
    position absolute
    margin-top 0.16rem
a
    color #333
    text-decoration none
    -webkit-tap-highlight-color transparent
.topbar-title
    width 90%
    text-overflow ellipsis
    white-space nowrap
    overflow hidden
    display inline-block
    margin 0 auto
    font-size 0.18rem
.zfont
    position: absolute;
    right: 2.5em;
    top: 0;
    display: block;
    font-size: 1.6em;
.menu
    background: url('../assets/img/menu.png') no-repeat;
    background-size: 20px 20px;
    position: absolute;
    top: 0;
    right: 1em;
    width: 0.2rem;
    height: 0.2rem;
    margin-top: 0.14rem;
    margin-left: 1em;
    z-index: 100;
    cursor: pointer;
.list
    background: #fff;
    margin-bottom: 1em;
ul, ol, li, dl, dt, dd 
    list-style: none;
.personal-li
    border-bottom: 1px solid #f3f4f5;
    position: relative;
    margin-left: 0.1rem
    padding-bottom: 0.1rem
    padding-top: 0.1rem
    

.touxiang
    font-size: 0.15rem
    padding-right: 1em
    padding-bottom: 1em;
.photo
    width 0.45rem
    height 0.45rem
    
    

.photo img 
    width: 100%;
    height: 100%;
    border-radius: 100%;
.personal-li span 
    position: absolute;
    top: 0.1rem;
    right: 0.08rem;
.clearfix:before
    display: table;
    content: " ";
.clearfix:after
    display: table;
    content: " ";
    clear: both;
.nickname
    padding-right: 1em;
    font-size 0.12rem
.nickname:after
    top: 18px;
    width: .5em;
    height: .5em;
    right: 0.1rem;
    border-width: 0.01rem;
.num
    color: #999;  
    font-size 0.12rem  
.signout
    margin: 1em 1em 0;
    background: #d9534f;
    border: #e3524d solid 0.01rem;
    display: block;
    color: #fff;
    font-size: 0.13rem
    padding-bottom: .5em;
    padding-top: 0.5em;
    text-align: center;
</style>